<template>
    <div class="ylt-line-wrap">
        <yd-navbar title="跟团游" bgcolor="#47adff" height=".9rem" color="#fff" fixed></yd-navbar>
        <div class="ylt-container">
            <yd-tab horizontal-scroll v-model="curentIndex" :item-click="handleCheckLine"  :prevent-default="false">
                <yd-tab-panel :label="item.paramName" v-for="item in lineTypeList" :key="item.id"></yd-tab-panel>
            </yd-tab>
            <div class="m-cell search-form" style="margin: 0;padding-top: 0;">
                <div class="cell-item city">
                    <div class="item-colum">
                        <span class="label">目的地</span>
                        <input type="" name="" id="place" value="" v-model="city" @input="handleSearch"/>
                    </div>
                </div>
                <div class="cell-item date">
                    <div class="item-colum">
                        <span class="label">出发日期</span>
                        <input type="date" v-model="goDate" name="" id="date" value="" @change="handleSearch" />
                    </div>
                </div>
            </div>
            <div class="gap-module"></div>
            <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
                <yd-list theme="1" slot="list">
                    <yd-list-item v-for="(item, key) in list" :key="key">
                        <img slot="img" :src="item.imgUrl" @click="goDetail(item.id)">
                        <span slot="title">{{item.lineName}}</span>
                        <yd-list-other slot="other">
                            <div>
                                <span class="list-price"><em>¥</em>{{item.price}}</span>
                                <!-- <span class="list-del-price">¥{{item.productprice}}</span> -->
                            </div>
                        </yd-list-other>
                    </yd-list-item>
                </yd-list>

                <!-- 数据全部加载完毕显示 -->
                <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

                <!-- 加载中提示，不指定，将显示默认加载中图标 -->
                <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
            </yd-infinitescroll>   
        </div>
        
    </div>
    
    
</template>

<script>
export default {
    name: 'index',
    data () {
        return {
            pageIndex: 1,
            pageSize: 10,
            total:0,
            loading: false,
            list: [],
            city:'',
            goDate:'',
            params:{
    			BranchId:4090,
                CommunityShopId:23
            },
            BranchId:4090,
            lineTypeList:[],
            isMore:true,
            curentIndex:0,
            kefuList:[]
        }
    },
    mounted() {
        // var search = location.search;
        // var obj={};
        // if(search.indexOf('?')>-1){
        //     var arr=search.substr(1).split('&');
        //     arr.forEach(function(item){
        //         item=item.split('=');
        //         obj[item[0]]=item[1];
        //     })
        // }
        // this.params=obj;
        this.getGroupType();
    },
    methods:{
        goDetail(id){
            this.$router.push({
                name:'groupline-detail',
                query:{
                    LineId:id,
                    BranchId:this.params.BranchId,
                    EnumGroupLineType:this.curentIndex,
                    TargetCityName:this.city,
                }
            })
        },
        handleSearch:function(){
            this.pageIndex=1;
            this.getData(this.curentIndex)
        },
        loadList() {
            if (!this.isMore) {
                /* 所有数据加载完毕 */
                return;
            }
            this.getData(this.curentIndex)
        },
        getData(key){
            this.$dialog.loading.open();
            this.http.get("/GroupLine/GetGroupLineListH5?BranchId="+this.params.BranchId+"&EnumGroupLineType="+this.lineTypeList[key].id+"&TargetCityName="+this.city+"&GoDate="+this.goDate+"&PageSize="+this.pageSize+"&PageIndex="+this.pageIndex)
            .then(res=>{
                 if(res.data.isSuccess){
                    if(this.pageIndex==1){
                        this.list=res.data.objects;
                        this.list.total=res.data.total;
                    }else{
                        this.list=this.list.push(...res.data.objects);
                    }
                    if(this.total>this.list.length){
                        this.isMore=true;
                    }else{
                        this.isMore=false;
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                    }
                    this.loading = false
                    /* 单次请求数据完毕 */
                    // this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                    this.pageIndex++;
                }else{
                    this.$dialog.toast({
                        mes:res.data.message, 
                        icon:'none',
                        timeout:2000}
                    );
                }
                this.$dialog.loading.close();
            })
            .catch(err=>{

            })
              
        },
        getGroupType:function(){
            this.$dialog.loading.open();
            this.http.get("/GroupLine/GetGroupLineParamListH5?BranchId="+this.params.BranchId)
            .then(res=>{
                // if(res.data.isSuccess){
                    this.lineTypeList=res.data;
                    this.getData(0)
                // }else{
                //     dialog.toast(res.data.message, 'none', 2000);
                // }
            })
            .catch(err=>{
                
            })
        },
        handleCheckLine(key){
            this.pageIndex=1;
            this.curentIndex=key;
            this.getData(key)
        },
    }
}
</script>
<style scoped>

    .list-price {
        font-size: .3rem;
        color: #eb5211;
    }
    .list-price>em {
        font-size: .22rem;
    }
</style>